<template>
    <div class="left">
        <div class="left-top" @click="navUserIndex">
            <img :src="userInfo.avatar" class="top-avatar" alt="">
            <div class="top-name">{{userInfo.nickname}}</div>
            <div class="top-company" v-if="userInfo.company_name">{{userInfo.company_name}}</div>
            <div class="top-tel">{{userInfo.phone}}</div>
        </div>
        <div class="list">
            <ul>
                <li @click="looLink(1)" :class="active == 1 ? 'active' : ''">月结信息</li>
                <li @click="looLink(2)" :class="active == 2 ? 'active' : ''">我的订单</li>
                <li @click="looLink(11)" :class="active == 11 ? 'active' : ''">采购清单</li>
                <li @click="looLink(3)" :class="active == 3 ? 'active' : ''">我的收藏</li>
                <li @click="looLink(4)" :class="active == 4 ? 'active' : ''">我的足迹</li>
                <li @click="looLink(5)" :class="active == 5 ? 'active' : ''">收货地址管理</li>
                <li @click="looLink(6)" :class="active == 6 ? 'active' : ''">审批人管理</li>
                <li @click="looLink(7)" :class="active == 7 ? 'active' : ''">开票信息管理</li>
                <li @click="looLink(8)" :class="active == 8 ? 'active' : ''">售后/联系客服</li>
                <li @click="looLink(9)" :class="active == 9 ? 'active' : ''">设置</li>
                <li @click="looLink(10)" :class="active == 10 ? 'active' : ''">退出登录</li>
            </ul>
        </div>
        <contact ref="contact"></contact>
    </div>
</template>

<script>
import contact from "@/components/contact";
import { getUser } from "@api/user";
import { mapGetters } from "vuex";
export default {
    name: "leftNavBar",
    props: ["active"],
    computed: {
        ...mapGetters(["userInfo"]),
    },
    components: {
        contact: contact,
    },
    methods: {
        navUserIndex() {
            this.$router.replace({
                path: "/setting",
            });
        },
        looLink(e) {
            /**
             * 个人主页
             *  */

            if (e == 1) {
                this.$router.replace({
                    path: "/monthEndInfo",
                });
            }
            /**
             * 采购清单
             *  */

            if (e == 11) {
                this.$router.push({
                    path: "/stockList",
                });
            }
            /**
             * 个人实名认证
             *  */

            if (e == 2) {
                this.$router.replace({
                    path: "/order",
                });
            }
            /**
             * 我的订单
             *  */

            if (e == 3) {
                this.$router.replace({
                    path: "/collection",
                });
            }
            /**
             * 我的优惠券
             *  */

            if (e == 4) {
                this.$router.replace({
                    path: "/footPrint",
                });
            }
            /**
             * 我的收藏
             *  */

            if (e == 5) {
                this.$router.replace({
                    path: "/address",
                });
            }
            /**
             * 我的积分
             *  */

            if (e == 6) {
                this.$router.replace({
                    path: "/approver",
                });
            }
            /**
             * 修改密码
             *  */

            if (e == 7) {
                this.$router.replace({
                    path: "/billInfoIndex",
                });
            }
            /**
             * 收货地址
             *  */

            if (e == 8) {
                this.$refs.contact.contactShow = true;
            }
            /**
             * 设置
             *  */

            if (e == 9) {
                this.$router.replace({
                    path: "/set",
                });
            }
            /**
             * 设置
             *  */

            if (e == 10) {
                let that = this;
                this.$dialog.confirm({
                    title: "提示",
                    mes: `确认退出当前账号吗？`,
                    opts: (res) => {
                        localStorage.clear();
                        that.$store.commit("LOGOUT");
                        that.$store.commit("UPDATE_USERINFO", null);
                        that.$router.replace("/login");
                    },
                });
            }
        },
    },
};
</script>

<style scoped  rel="stylesheet/scss" lang="scss">
$color: #da213d;
.left {
    .left-top {
        cursor: pointer;
        width: 260px;
        height: 200px;
        border: 1px solid #efc2c1;
        border-radius: 5px;
        .top-avatar {
            width: 68px;
            border-radius: 100%;
            height: 68px;
            margin: 18px auto 0;
            display: block;
        }
        .top-name {
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            color: #4a4a4a;
            line-height: 28px;
            width: 80%;
            word-break: break-all;
            margin: 4px auto 0;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
        .top-company {
            margin: 5px auto 0;
            width: 111px;
            height: 26px;
            background: linear-gradient(143deg, #da213d 23%, #da213d 90%);
            border-radius: 13px;
            font-size: 12px;
            text-align: center;
            color: #ffffff;
            line-height: 26px;
        }
        .top-tel {
            margin-top: 15px;
            font-size: 15px;
            text-align: center;
            color: #999999;
            line-height: 21px;
        }
    }
    .crumbs {
        display: flex;
        height: 91px;
        align-items: center;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        > div:nth-of-type(1) {
            color: #999999;
        }
        > div:nth-pf-type(2) {
            color: #333333;
        }
    }
    .list {
        width: 260px;
        // height: 490px;
        margin-top: 10px;
        display: flex;
        background: #faf5f5;
        border: 1px solid #efc2c1;
        justify-content: center;
        ul {
            display: flex;
            flex-direction: column;
            width: 490px;
            justify-content: flex-start;
            align-items: center;
            padding: 0;
            margin-top: 0;
            li {
                list-style-type: none;
                font-size: 16px;
                cursor: pointer;
                color: #333333;
                width: 100%;
                height: 49px;
                text-align: center;
                line-height: 49px;
                position: relative;
                &::before {
                    position: absolute;
                    bottom: 0;
                    left: 16px;
                    right: 16px;
                    border-style: dashed;
                    border-width: 1px;
                    border-color: #dbdbdb;
                    content: "";
                }
            }
            .active {
                color: $color;
                font-weight: 600;
                background: #ffffff;
            }
        }
    }
}
</style>
